{% extends 'admin.html' %}


{% block css %}
    <style>
        .error {
            color: red;
            position: absolute;

        }

        .layui-form-item {
            margin-bottom: 20px;
        }
    </style>
{% endblock %}

{% block left %}
    <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed layui-this">
            <a class="" href="{% url 'admin_home' %}">书架</a>

        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">我的权限</a>
            <dl class="layui-nav-child">
                {% if request.admin == 'true' %}
                    <dd><a href="{% url 'admin_toAdmin' %}">管理员管理</a></dd>
                {% endif %}
                <dd><a href="{% url 'manage_user' %}">用户管理</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">个人中心</a>
            <dl class="layui-nav-child">
                <dd><a href="{% url 'admin_detail' %}">账号详情</a></dd>

            </dl>
        </li>
    </ul>
{% endblock %}

{% block body %}
    <span class="layui-breadcrumb">
                <a href="{% url 'admin_home' %}">首页</a>
                <a><cite>书架</cite></a>
            </span>
    <hr/>
    <form class="layui-form" action="{% url 'search_book' %}">

        <div class="layui-inline">
            <label class="layui-form-label">筛选条件</label>
            <div class="layui-input-inline">
                <select name="type" lay-verify="required" required>
                    <option value=""></option>
                    <option value="0">ISBN</option>
                    <option value="1">书名</option>
                    <option value="2">作者</option>
                    <option value="3">出版社</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <input type="text" name="title" required lay-verify="required" placeholder="ISBN，书名，作者，出版社"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <button type="submit" class="layui-btn layui-btn-primary">查询</button>
        <a class="layui-btn layui-btn-checked" style="float:right;" onclick="btnAdd()">添加图书</a>

    </form>
    <hr/>

    {% if flag == 1 %}
        <a href="{% url 'admin_home' %}">返回首页</a>
        <hr/>
    {% endif %}
    <table class="layui-table">
        <tr>
            <th>ISBN</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
        {% for book in book_list %}
            <tr>
                <th>{{ book.ISBN }}</th>
                <th>{{ book.book_name }}</th>
                <th>{{ book.author }}</th>
                <th>{{ book.press }}</th>
                <th>{{ book.price }}</th>
                <th>{{ book.num }}</th>
                <th>
                    <button id="btn1-{{ book.id }}" onclick="edit({{ book.id }})" class="layui-btn layui-btn-normal">
                        补货
                    </button>
                    <button id="btn2-{{ book.id }}" class="layui-btn layui-btn-danger" onclick="del({{ book.id }})">删除
                    </button>
                </th>
            </tr>
        {% endfor %}
    </table>




{% endblock %}

{% block js %}
    <script>
        function edit(bookId) {
            layer.open({
                title: '补充货量'
                , content: '<div class="layui-form-item">\n' +
                    '                <label class="layui-form-label">数量</label>\n' +
                    '                <div class="layui-input-block">\n' +
                    '                    <input class="layui-input" type="number" id="num" placeholder="修改后的数量" value="20">\n' +
                    '                    <p class="error" id="error"></p>\n' +
                    '                </div>\n' +
                    '            </div>'
                , btn: ['确认', '取消']
                , yes: function (index, layero) {
                    if ($('#num').val() == "") {
                        $('#error').html('数量不能为空')
                        return
                    }
                    $.ajax({
                        url: '{% url 'add_num' %}',
                        type: 'POST',
                        data: {'bookId': bookId, 'bookNum': $('#num').val()},
                        dataType: 'JSON',
                        success: function (res) {
                            if (!res.status) {
                                $('#error').html('数量不能小于0')

                            } else {
                                layer.open({
                                    content: '成功补货',
                                    btn: ['确定'],
                                    yes: function (index, layero) {
                                        location.href = '{% url 'admin_home' %}'
                                    }
                                })
                            }
                        }
                    })
                }
            });
        }

        function del(bookId) {
            layer.open({
                content: "确认删除？",
                btn: ['确认', '取消'],
                yes: function (index, layero) {
                    $.ajax({
                        url: '{% url 'del_book' %}',
                        type: 'POST',
                        data: {'bookId': bookId},
                        dataType: 'JSON',
                        success: function (res) {
                            layer.open({
                                    content: '删除成功',
                                    btn: ['确认'],
                                    yes: function (index, layero) {
                                        location.href = '{% url 'admin_home' %}'
                                    }
                                }
                            )
                        }
                    })
                }
            })

        }

        function btnAdd() {
            layer.open({
                title: '添加书籍'
                , content: '    <form class="layui-form" action="">\n' +
                    '        <div class="layui-form-item">\n' +
                    '            <label class="layui-form-label">ISBN</label>\n' +
                    '            <div class="layui-input-block">\n' +
                    '                <input type="text" id="ISBN" required lay-verify="required" placeholder="ISBN" autocomplete="off"\n' +
                    '                       class="layui-input">\n' +
                    '                <p class="error" id="errISBN"></p>\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '        <div class="layui-form-item">\n' +
                    '            <label class="layui-form-label">书名</label>\n' +
                    '            <div class="layui-input-block">\n' +
                    '                <input type="text" id="bookName" required lay-verify="required" placeholder="书名" autocomplete="off"\n' +
                    '                       class="layui-input">\n' +
                    '                <p class="error" id="errName"></p>\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '        <div class="layui-form-item">\n' +
                    '            <label class="layui-form-label">作者</label>\n' +
                    '            <div class="layui-input-block">\n' +
                    '                <input type="text" id="author" required lay-verify="required" placeholder="作者" autocomplete="off"\n' +
                    '                       class="layui-input">\n' +
                    '                <p class="error" id="errAuthor"></p>\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '        <div class="layui-form-item">\n' +
                    '            <label class="layui-form-label">出版社</label>\n' +
                    '            <div class="layui-input-block">\n' +
                    '                <input type="text" id="press" required lay-verify="required" placeholder="出版社" autocomplete="off"\n' +
                    '                       class="layui-input">\n' +
                    '                <p class="error" id="errPress"></p>\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '        <div class="layui-form-item">\n' +
                    '            <label class="layui-form-label">价格</label>\n' +
                    '            <div class="layui-input-block">\n' +
                    '                <input type="text" id="price" required lay-verify="required" placeholder="价格" autocomplete="off"\n' +
                    '                       class="layui-input">\n' +
                    '                <p class="error" id="errPrice"></p>\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '        <div class="layui-form-item">\n' +
                    '            <label class="layui-form-label">数量</label>\n' +
                    '            <div class="layui-input-block">\n' +
                    '                <input type="number" id="num" required lay-verify="required" placeholder="数量" autocomplete="off"\n' +
                    '                       class="layui-input" value="10">\n' +
                    '                <p class="error" id="errNum"></p>\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '    </form>'
                , btn: ['确认', '取消']
                , yes: function (index, layero) {
                    var flag = 1
                    if ($('#num').val() == "") {
                        $('#errNum').html('不能为空')
                        flag = 0
                    } else {
                        $('#errNum').html('')

                    }
                    if ($('#ISBN').val() == "") {
                        $('#errISBN').html('不能为空')
                        flag = 0
                    } else {
                        $('#errISBN').html('')
                    }
                    if ($('#bookName').val() == "") {
                        $('#errName').html('不能为空')
                        flag = 0
                    } else {
                        $('#errName').html('')
                    }
                    if ($('#author').val() == "") {
                        $('#errAuthor').html('不能为空')
                        flag = 0
                    } else {
                        $('#errAuthor').html('')
                    }
                    if ($('#press').val() == "") {
                        $('#errPress').html('不能为空')
                        flag = 0
                    } else {
                        $('#errPress').html('')
                    }
                    if ($('#price').val() == "") {
                        $('#errPrice').html('不能为空')
                        flag = 0
                    } else {
                        $('#errPrice').html('')

                    }
                    if (flag == 0) return
                    $.ajax({
                        url: '{% url 'add_book' %}',
                        type: 'POST',
                        data: {
                            'num': $('#num').val(),
                            'ISBN': $('#ISBN').val(),
                            'bookName': $('#bookName').val(),
                            'author': $('#author').val(),
                            'press': $('#press').val(),
                            'price': $('#price').val(),
                        },
                        dataType: 'JSON',
                        success: function (res) {

                            layer.open({
                                    content: '添加成功',
                                    btn: ['确认'],
                                    yes: function (index, layero) {
                                        location.href = '{% url 'admin_home' %}'
                                    }
                                }
                            )

                        }
                    })
                }
            });
        }
    </script>
{% endblock %}